<template>
    <div class="box">
        <!-- 导航栏 -->
        <navlist title="购物车"></navlist>
        <!-- 购物车的渲染 -->
        <div v-if="shopCar.length > 0">
            <van-swipe-cell v-for="(v, i) in shopCar" :key="i">
                <van-card :price="v.goods_price" :title="v.goods_name" class="goods-card" thumb="">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="v.checked"></van-checkbox>
                            <img :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                                alt="" style="width: 5rem;height: 5rem;margin-left: 0.4rem;">
                        </div>
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" @click="delFun(i)" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
            <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checkedFun" @click="isCheckedAll">全选</van-checkbox>
            </van-submit-bar>
        </div>
        <div v-else>
            <van-empty description="暂无购物车数据" />
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from "vue"

import navlist from '@/components/navlist.vue';

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

let shopCar = ref(store.shopList)
console.log(shopCar.value)

const delFun = (i) => {
    shopCar.value.splice(i, 1)
}

// let checked = ref(true)

const checkedFun = computed(() => {
    shopCar.value.every((v) => v.checked)
})

const isCheckedAll = () => {
    console.log(123)
    let flag = !checked.value
    shopCar.value.forEach((v) => {
        v.checked = flag
    })
}

const onSubmit = () => showToast('点击按钮');
const onClickLink = () => showToast('修改地址');

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }
}
</style>